<template>
  <div class="map-box">
    <div id="map"></div>
    <form>
      <input style="margin-left:20px;" type="button" id="enterTrack" value="进入单个跟踪">
      <!-- <input style="margin-left:20px;" type="button" id="exitTrack" value="退出单个跟踪"> -->
    </form>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js',
    'http://1.95.157.217/static/turf/turf.min.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
        const locationIMG =
    ''

        const points1 = turf.randomPoint(1000, { bbox: [96, 31, 100, 40] })
        const points2 = turf.randomPoint(10000, { bbox: [103, 36, 103.05, 36.06] })

        const map = new WMap.Map('map', {
          center: [105.04434162820588, 35.0690079506098],
          zoom: 5,
          minZoom: 3,
          maxZoom: 18
        })
        const markers = points1.features.map((feature, i) => {
          const marker = new WMap.Marker({
            position: feature.geometry.coordinates,
            icon: locationIMG,
            offset: [-16, -16],
            label: `${i}`,
            extData: {
              name: `${i}`
            }
          })
          marker.on('click', e => {
            console.log(e.target.olTarget)
            console.log(e.target.getExtentData())
          })
          return marker
        })

        const contentMarkers = points2.features.map((feature, i) => {
          const marker = new WMap.Marker({
            fontColor: '#fff',
            borderColor: '#0000005e', // 边框颜色
            labelBgColor: '#0000005e', // 背景颜色
            offset: [-35, -80],
            labelYOffset: -90,
            labelXOffset: 0,
            padding: [5, 3, 5, 5],
            position: feature.geometry.coordinates,
            // offset: [-16, -16],
            label: `${i}`
          })
          marker.on('click', e => {
            map.setTop(e.target)
          })
          return marker
        })

        // 实例化聚合对象
        const markerCluster = new WMap.MarkerCluster(map, markers.concat(contentMarkers), {
          noClusterZoom: 18, // 在zoom及以上不聚合
          distance: 40, // 要素将聚集在一起的距离（以像素为单位）
          minDistance: 30, //  簇之间的最小距离（以像素为单位）
          showViewExtent: true, // 只展示可视区域 Marker
          zoomOnClick: true, // 是否点击展开 Cluster
          averageCenter: false // 聚合点的图标位置是否是所有聚合内点的中心点。默认为否
        })

        markerCluster &&
          markerCluster.on('click', w => {
            console.log(w)
          })

        map.on('click', w => {
          console.log(w.lngLat)
        })

        // 进入车辆跟踪
        const car = new WMap.Marker({
          map,
          position: [103.378456, 30.370259],
          icon: 'https://webapi.amap.com/images/car.png',
          offset: [-26, -13],
          angle: -90
        })
        const enterTrack = document.getElementById('enterTrack')
        enterTrack.onclick = () => {
          map.setFitView()
          markerCluster.clearMarkers()
          map.setCenter(new WMap.LngLat(103.378456, 30.370259))
          markerCluster.add(car);
          const lineArr3 = [
            [103.378456, 30.370259],
            [103.378478, 30.370267],
            [103.378691, 30.370385],
            [103.378867, 30.370467],
            [103.379042, 30.370517],
            [103.383437, 30.371514],
            [103.384397, 30.371879],
            [103.385586, 30.372397],
            [103.386265, 30.37267],
            [103.387201, 30.373052],
            [103.38785, 30.373372],
            [103.394335, 30.374109],
            [103.395173, 30.37406],
            [103.395975, 30.373903],
            [103.396927, 30.373657],
            [103.397293, 30.373631],
            [103.397469, 30.373644],
            [103.397705, 30.373673],
            [103.398223, 30.373922],
            [103.399801, 30.374875],
            [103.400991, 30.375625],
            [103.403118, 30.376967],
            [103.40408, 30.377843],
            [103.404324, 30.378087],
            [103.404705, 30.378434],
            [103.405033, 30.378699],
            [103.405323, 30.378877],
            [103.406718, 30.37965],
            [103.406779, 30.379688],
            [103.407024, 30.379833],
            [103.408984, 30.380896],
            [103.415309, 30.383147],
            [103.415568, 30.383287],
            [103.416172, 30.383475],
            [103.424384, 30.393223],
            [103.433915, 30.404235],
            [103.434412, 30.40423],
            [103.434953, 30.404177],
            [103.436153, 30.404223],
            [103.43694, 30.404332],
            [103.437284, 30.404402],
            [103.437399, 30.404427],
            [103.437283, 30.405032],
            [103.437062, 30.406301],
            [103.437009, 30.406606],
            [103.436871, 30.406678],
            [103.436237, 30.406605],
            [103.43325, 30.406192],
            [103.432625, 30.4061],
            [103.432181, 30.406031],
            [103.431998, 30.406008],
            [103.431013, 30.40592],
            [103.430638, 30.405882],
            [103.430638, 30.405882],
            [103.429523, 30.405708],
            [103.428568, 30.405556],
            [103.427851, 30.405454],
            [103.426881, 30.405299],
            [103.425972, 30.405138],
            [103.425385, 30.405011],
            [103.425385, 30.405011],
            [103.425255, 30.405028],
            [103.424178, 30.406345],
            [103.424163, 30.406454],
            [103.42443, 30.407117],
            [103.424514, 30.407354],
            [103.424842, 30.408229],
            [103.425247, 30.409408],
            [103.425598, 30.410578],
            [103.425896, 30.41169],
            [103.426133, 30.412652],
            [103.426285, 30.413279],
            [103.426407, 30.413811],
            [103.426537, 30.414437],
            [103.426819, 30.416285],
            [103.426865, 30.416598],
            [103.426949, 30.417355],
            [103.427056, 30.418494],
            [103.426383, 30.449255],
            [103.425413, 30.45186],
            [103.425145, 30.452646],
            [103.424916, 30.453381],
            [103.424764, 30.453925],
            [103.424642, 30.454461],
            [103.424405, 30.455541],
            [103.424291, 30.456213],
            [103.424237, 30.456587],
            [103.42358, 30.460775],
            [103.423443, 30.461668],
            [103.423374, 30.462459],
            [103.423336, 30.462942],
            [103.423374, 30.463488],
            [103.42342, 30.464076],
            [103.423489, 30.46453],
            [103.42358, 30.464934],
            [103.423702, 30.465373],
            [103.423901, 30.465941],
            [103.431384, 30.478562],
            [103.431765, 30.479437],
            [103.433613, 30.483441],
            [103.434431, 30.48519],
            [103.434676, 30.485691],
            [103.437486, 30.489066],
            [103.437869, 30.489338],
            [103.438197, 30.489559],
            [103.438526, 30.489757],
          ]
          // 实时轨迹线
          const polyline3 = new WMap.Polyline({
            map,
            mode: 'real',
            activeStrokeColor: 'green', // 活跃历史轨迹线颜色
            strokeWeight: 6 // 线宽
          })
          lineArr3.map((item, i) => {
            setTimeout(() => {
              car.move(polyline3, item)
              map.panTo(item, { duration: 0 })
            }, i * 1000)
          })
        }
        // 退出车辆跟踪(正在开发)
        // const exitTrack = document.getElementById('exitTrack')
        // exitTrack.onclick = () => {
        //   map.remove(car);
        //   map.remove(polyline3)
        //   markerCluster.clearMarkers()
        //   markerCluster.setMarkers(markers.concat(contentMarkers))
        // }
    })
  })
</script>

<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
</style>
